<template>
  <div class="resource-box">
    <div class="page-title" style="margin-bottom: 20px;">资源监控</div>
    <div class="pc-box">
      <div v-for="item in 12" :key="item" style="width: 33%;margin-bottom: 15px;">
        <div class="pc-item">
          <div class="cantent">
            <img class="discimg" :src="require('@/assets/img/harddisc.png')">
            <div>
              <div class="label">东南中心CPU数</div>
              <div class="value">1,234核</div>
            </div>
          </div>
          <div class="num-box">
            <div class="num-item"><span class="label">已分配：</span><span class="value">321核</span></div>
            <div class="num-item"><span class="label">未分配：</span><span class="value">2121核</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="echarts-box">
      <div v-for="(item,index) in echartList" :key="index" style="width: 33%;min-width: 510px;">
        <pieItem :echartData="item.data" :echartType="item.type"></pieItem>
      </div>

    </div>
  </div>
</template>
<script>
import pieItem from './pieItem.vue'
export default {
  components:{pieItem},
  data(){
    return {
      pcList:[],
      echartList:[
        {type:'pie',
        data:[
        { name: '物理机', value: 40 },
        { name: '虚拟机', value: 30 },
        { name: '镜像服务', value: 20 },
      ]},
      {type:'pie2',
      data:[
        { name: '文件存储', value: 20 },
        { name: '块存储', value: 20 },
        { name: '分布式存储', value: 20 },
        { name: '存桶', value: 20 },
      ]},
      {
        type:'pie',
        data:[
        { name: '虚拟云VRC', value: 15 },
        { name: '负载均衡', value: 30 },
        { name: '虚拟防火墙', value: 25 },
        { name: 'VPN网关', value: 20 },
      ]}
    ]
    }
  }
}
</script>

<style lang="less" scoped>
  // 页面头部样式
  .page-title {
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
  }
  .resource-box{
    .pc-box{
    min-width: 1500px;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
      width: 100%;
      .pc-item{
        box-sizing: border-box;
        padding: 0 45px;
        width: 490px;
        height: 146px;
        border: 1px #e9e9e9 solid;
        .cantent{
          width:100%;
          height: 102px;
          display: flex;
          align-items: center;
          border-bottom:1px #e9e9e9 solid;
          .discimg{
            height: 56px;
            width: 52px;
            margin-right: 5px;
          }
          .label{
            color: #0000006D;
            font-size: 14px;
          }
          .value{
            color: #000000D8;
            font-size: 30px;
          }
        }
        .num-box{
          width:100%;
          height:43px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .num-item{
            padding: 0 30px;
            font-size: 14px;
            .label{
              color: #0000006D;
            }
            .value{
              color: #000000A5;
            }
          }
        }

      }
    }
    .echarts-box{
      display: flex;
      justify-content: space-between;
    }
  }
</style>
